<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史记录</title>
</head>
<body>
<input type="button" value="测试历史记录" onclick="addHistory()">
</body>
<script>
    //添加历史记录
    function addHistory(){
        //判断浏览器是否支持历史记录，毕竟是h5的新特性，低版本浏览器不支持
        if(window.history && history.pushState){
            //支持
            history.pushState(new Date().toLocaleDateString(),"设置历史记录的标签，但是目前浏览器还不支持","?demo="+new Date().toLocaleTimeString());
        }else{
            console.log("抱歉，浏览器不支持历史记录")
        }
    }

    //下面这个事件是点击浏览器中的前进或后退时触发
    window.addEventListener("popstate",function(e){
        console.log("点击了历史按钮"+e.state);
    })
</script>
</html>